<template>
	<view class="contact-customer-service">
		<image class="picture" src="/static/common/contact-us.png" mode="aspectFill"></image>
		<text class="phone-number">{{ phoneNumber }}</text>
		<text class="customer-service-name">{{$t('contact.us.customer.service.name')}}</text>
		<view class="actions">
			<up-button type="primary" size="large" shape="circle" class="btn" @tap="handleCall">
				<image class="btn-icon" src="/static/common/phone-icon.png" mode="aspectFill"></image>
				{{$t('contact.us.call.btn')}}
			</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady
	} from "@dcloudio/uni-app";
	import {
		getConnect
	} from '../../apis/components/system';

	const phoneNumber = ref('');
	onReady(async () => {
		const {
			data
		} = await getConnect();
		phoneNumber.value = data;
	})
	const handleCall = () => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber.value
		})
	}
</script>

<style lang="scss">
	.contact-customer-service {
		padding-top: 150rpx;
		@include flex(column);
		align-items: center;

		.picture {
			width: 334rpx;
			height: 333rpx;
			margin-bottom: 67rpx;
		}

		.phone-number {
			// font-family: PingFang SC Bold;
			font-size: 48rpx;
			line-height: 1;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}

		.customer-service-name {
			// font-family: PingFangSC;
			font-size: 26rpx;
			line-height: 1;

			color: #999999;
			margin-bottom: 110rpx;
		}

		.actions {
			width: 100%;
			box-sizing: border-box;
			padding: 0 56rpx;
		}

		.btn {
			// font-family: PingFangSC;
			color: #111111 !important;
			font-size: 32rpx;
			line-height: 1;

			&-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>